<!---
	config: [{ spanNum: 4, label: '标签', field: '字段名', type: '表单类型', disabled: '是否禁用', defaultVal: '默认值', options: [{label: '显示', value: '值'}] }]
		spanNum：el-col栅格占据列数，默认：12
		switch：
			activeValue: 开关开启值
			inactiveValue: 开关关闭值
	formSize：表格内组件大小，默认值：default；可选值：large、default、small
	labelWidth: label宽度，默认值：120px
--->
<template>
	<el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    :label-width="labelWidth"
		:label-position="labelPosition"
    class="formWrap"
    :size="formSize"
    status-icon
  >
		<el-row class="formContent">
			<template v-for="(item, index) in config">
				<el-col v-if="item.field" :span="item.spanNum || 12">
					<!-- 下拉选择框 -->
					<el-form-item v-if="item.type === 'select'" :label="item.label" :prop="item.field">
						<el-select v-model="ruleForm[item.field]" :disabled="item.disabled || false" :placeholder="`请选择${item.label}`">
							<el-option
								v-for="el in item.options"
								:key="el.value"
								:label="el.label"
								:value="el.value"
							/>
						</el-select>
					</el-form-item>
					<!-- 单选框 -->
					<el-form-item v-else-if="item.type === 'radio'" :label="item.label" :prop="item.field">
						<el-radio-group v-model="ruleForm[item.field]" :disabled="item.disabled || false">
							<el-radio
								v-for="el in item.options"
								:label="el.value"
								size="large"
								:key="el.value">
								{{ el.label }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
					<!-- 复选框 -->
					<el-form-item
						v-else-if="item.type === 'checkbox'"
						:label="item.label"
						:prop="[item.field]">
						<el-checkbox-group v-model="ruleForm[item.field]" :disabled="item.disabled || false">
							<el-checkbox
								v-for="el in item.options"
								:key="el.value"
								:label="el.value"
							>
								{{ el.label }}
							</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<!-- 开关 -->
					<el-form-item v-else-if="item.type === 'switch'" :label="item.label" :prop="item.field">
						<el-switch
							v-model="ruleForm[item.field]"
							:disabled="item.disabled || false"
							:active-value="item.activeValue || '100'"
							:inactive-value="item.inactiveValue || '0'"
						/>
					</el-form-item>
					<el-form-item v-else :label="item.label" :prop="item.field">
						<el-input v-model="ruleForm[item.field]" :type="item.type || 'text'" :disabled="item.disabled || false" :placeholder="`请输入${item.label}`" />
					</el-form-item>
				</el-col>
			</template>
		</el-row>
		<el-form-item>
			<div class="btnBox" :class="btnPosition">
				<el-button type="primary" @click="onSumit(ruleFormRef)">确定</el-button>
				<el-button @click="onCancel(ruleFormRef)">取消</el-button>
			</div>
		</el-form-item>
  </el-form>
</template>

<script setup name="BzForm">
import { ElRow, ElCol, ElForm, ElFormItem, ElInput, ElSwitch, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElSelect, ElOption, ElButton } from 'element-plus';
import 'element-plus/dist/index.css';
import { defineEmits, defineExpose, onMounted, ref, reactive, watch, nextTick } from 'vue';

const emits = defineEmits(['onSumit', 'onCancel']);

const prop = defineProps({
	config: { type: Array, default: () => [] }, // 表单参数
	formSize: { type: String, default: 'default' }, // 表单内组件尺寸
	labelWidth: { type: [String, Number], default: '120px' },
	rules: { type: Object, default: () => {} },
	labelPosition: { type: String, default: 'right' }, // 标签对齐方式
	btnPosition: { type: String, default: 'right' }, // 按钮对齐方式, left|center|right
});
const { config, formSize, labelWidth, rules, labelPosition } = prop;

let ruleForm = reactive({});
const ruleFormRef = ref({});

const onSumit = async (formEl) => {
	if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      emits('onSumit', ruleForm);
    } else {
      console.log('error submit!', fields)
    }
  })
};
const onCancel = () => {
	config.forEach(el => {
		ruleForm[el.field] = el.defaultVal || '';
	});
	emits('onCancel');
};

watch(config, (newVal, oldVal) => {
	newVal.forEach(el => {
		ruleForm[el.field] = el.defaultVal || '';
	});
});
onMounted(() => {
	config.forEach(el => {
		ruleForm[el.field] = el.defaultVal || '';
	});
});

</script>
<script>
	export default {
		name: 'BzForm'
	}
</script>
<style lang="less" scoped>
	.formWrap{
		width: 100%;
		height: 100%;
		.formContent{
			max-height: calc(~"100% - 70px");
			overflow-y: auto;
		}
		.btnBox{
			width: 100%;
			display: flex;
		}
		.left{
			justify-content: flex-start;
		}
		.center{
			justify-content: center;
		}
		.right{
			justify-content: flex-end;
		}
	}
</style>
